<template>
  <div id="home-box">
      <van-nav-bar fixed>
          <!-- <span slot="left">
              <icon class="icon" name="msg-state" slot="left" color="#262626" size="28" @click="toMsg"></icon>            
              <span style="font-size:10px">分类</span>
          </span> -->
  
          <template slot="title">
            <van-search placeholder="请输入搜索关键词" disabled background="$red" @click="toSearch" />
          </template>
          <span slot="left" @click="toMsg">
              <icon class="icon" name="msg-index" slot="right" color="#262626" size="28"></icon>
              <span style="font-size:10px">消息</span>
          </span>
  
          <!-- <van-icon name="msg-index" slot="right" color="#262626" size="28" @click="toMsg" /> -->
        </van-nav-bar>
    <div class="home">
      <!-- <store-nav-bar background="#ff4444">
            <template slot="title">
              <router-link to="/main/search">
                <van-search placeholder="请输入搜索关键词" disabled background="$red">
                  <template v-slot:left-icon>
                    <van-icon name="search" color="#969799" size="15" />
                  </template>
                </van-search>
              </router-link>
            </template>
            <template slot="right">
              <van-icon name="chat-o" color="#fff" size="30" />
            </template>
          </store-nav-bar>-->

      <div class="home-content">
        <div class="curtain" ref="curtain">
          <!-- <div class="cav"></div> -->
        </div>
        <store-scroller ref='scrollList' @onRefresh="onRefresh" @onInfinite="onLoad" color='#eee'>
          <van-swipe :autoplay="3000" :height="130" class="round">
            <van-swipe-item v-for="(ad, index) in content.advertiseList" :key="index">
              <router-link :to="ad.url" class="round">
                <img v-lazy="ad.pic" height="130" width="100%" class="round">
              </router-link>
            </van-swipe-item>
          </van-swipe>
          <div class="list-title" @click='tofreeBuyList'>
              <span>0元限购</span>
              <icon class="icon" name="right-arraw"></icon>
          </div>
          <freeItem :item="itemList" @click.native="toDetail(itemList)"></freeItem>

          <div class="list-title">
            限量爆款
          </div>
          <router-link v-for="(item,index) in content.hotProductList.info" :key="item.id" :to="'/goods/'+item.id" style="border-radius: 5px;">
            <!-- <van-card class="round" :price="item.price" :origin-price="item.originalPrice" :title="item.name"
              :desc="item.subTitle" :thumb="item.pic" :lazy-load="true">
              <template v-slot:num>
                <van-button type="danger" size="small" round>立即抢购</van-button>
              </template>
            </van-card> -->
            <div class="product-card" :style="index%2==0?{float:'left'}:{float:'right'}">
              <div class="img-box">
                <img :src="item.pic"/>
              </div>
              <div class="product-info">
                 <div class="product-title">
                    {{item.name}}
                 </div>
                 <div class="money-box">
                   <span>￥
                    <span class="price-box">{{item.price}}</span>
                    <span v-if='vipEnable'>
                      /<span class="back-price-box">
                        返{{item.commission}}
                      </span>
                    </span>
                   </span>
                    <!-- /<span class="back-price-box">{{item.price}}</span>
                    </span> -->
                 </div>
                 <div class="had-sell-count">
                    <span>已售:{{item.sale}}件</span>
                 </div>
                 <!-- <div class="produce-sub-title">
                    {{item.subTitle}}
                 </div> -->
              </div>
            </div>
          </router-link>
          <div style="clear: both;"></div>
        </store-scroller>
      </div>
    </div>
  </div>

</template>

<script>
  import { mapState } from 'vuex'
  import {
    Icon,
    Search,
    Swipe,
    SwipeItem,
    PullRefresh,
    List,
    Cell,
    Toast,
    Card,
    Button,
    NavBar
  } from 'vant'
  import Arrow from '@/components/vue-scroller/components/Arrow.vue'
  import storeNavBar from '@/components/store-nav-bar'
  import storeScroller from '@/components/store-scroller'
  import { isIOS } from 'mobile-device-detect'
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth'
  import freeItem from "./components/freeItem";

  import _ from 'lodash'
  export default {
    components: {
      [Icon.name]: Icon,
      [Search.name]: Search,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [PullRefresh.name]: PullRefresh,
      [List.name]: List,
      [Cell.name]: Cell,
      [Card.name]: Card,
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      Toast,
      Arrow,
      storeNavBar,
      storeScroller,
      freeItem
    },
    computed: {
      // ...mapState({
      //   content: state => state.home.content
      // })
      ...mapGetters('sys', ['shareEnable', 'vipEnable']),
       ...mapState({
        content: state => state.home.content
      })
    },

    data() {
      return {
        isIOS: isIOS,
        images: ['', '', '', ''],
        list: [],
        itemList:{},
        // content: {
        //   advertiseList: [],
        //   hotProductList: []
        // },
        pageNum: 1, pageSize: 10, totalpage: 0, isNewList: true
      }
    },
    created() {
      if(_.get(this.$router.history,'current.meta.isCome',null)){
        this.$router.history.current.meta.isCome = false;
        this.onRefresh();
      }
      this.getFreeItemList();
    //  this.getBanner();
      // if (JSON.parse(localStorage.getItem("cache_home")) == null) {
      //   this.onRefresh();
      // } else {
      //   this.content.hotProductList = JSON.parse(localStorage.getItem("cache_home"));
      //   this.pageNum = JSON.parse(localStorage.getItem("cache_home_sendData")).pageNum;
      //   this.pageSize = JSON.parse(localStorage.getItem("cache_home_sendData")).pageSize;
      //   // this.pageNum = 1;
      //   // this.pageSize = 10;
      //   // this.content.advertiseList = JSON.parse(localStorage.getItem("cache_home_advertiseList"));
      // }
      // if (JSON.parse(localStorage.getItem("cache_home_advertiseList")) == null) {
      //   this.getBanner();
      // } else {
      //   this.content.advertiseList = JSON.parse(localStorage.getItem("cache_home_advertiseList"));
      // }

      // this.onRefresh();
      // this.$http.get("home/selectHotProductList", {pageNum:1,pageSize:10}).then(data => {
      //   this.content = data.info;
      //   localStorage.setItem("cache_home", JSON.stringify(data.info))
      // }).catch(error => {
      // })
      // this.$store.dispatch('home/content')
    },
    mounted() {
      const $content = document.querySelector('#home-box');
      $content.scrollTo(0, _.get(this.$router,'history.current.meta.scrollTo',0), true);
    },
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      from.meta.scrollTo = document.querySelector('#home-box').scrollTop; // 让 A 不缓存，即刷新       
      next();
    },
    methods: {
      onRefresh(callBack) {
        // this.$store.commit("home/SET_HOT_LIST_REFRESH");
        this.$store.dispatch("home/getHomeList",'Refresh').then((data) => {
          if (callBack) callBack(data.page >= data.totalpage);
        });
        this.getBanner();
        this.getFreeItemList();
       // return;
        // this.pageNum = 1; this.pageSize = 10;
        // if (typeof callBack == 'function') {
        //   callBack(false)
        // }
        // this.getBanner();
        // this.getList({ pageNum: this.pageNum, pageSize: this.pageSize }, callBack);
      },
      getList(sendData, callBack) {
        this.$http.post("home/selectHotProductList", sendData).then(data => {
          if (sendData.pageNum == 1) {
            this.content.hotProductList = data.info;
          } else {
            this.content.hotProductList = [...this.content.hotProductList, ...data.info];
          }
          localStorage.setItem("cache_home", JSON.stringify(this.content.hotProductList));
          this.totalpage = data.totalpage;
          localStorage.setItem("cache_home_sendData", JSON.stringify(sendData));
          if (sendData.pageNum > 1) {
            window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.scrollHeight * 0.1);
          }
          if(typeof callBack == 'function'){
            callBack(this.totalpage <= this.pageNum && this.totalpage != 0)
          }
        
        }).finally((res) => {
        }).catch((res) => {
          this.content.hotProductList = JSON.parse(localStorage.getItem("cache_home"));
          this.pageNum = JSON.parse(localStorage.getItem("cache_home_sendData")).pageNum;
          this.pageSize = JSON.parse(localStorage.getItem("cache_home_sendData")).pageSize;
          this.content.advertiseList = JSON.parse(localStorage.getItem("cache_home_advertiseList"));
          if (typeof callBack == 'function') {
            callBack(true)
          }
        })
      },
      onScroll(top) {
        if (top > 0)
          this.$refs.curtain.style.transform =
            'translate(0px,' + -(top / 3) + 'px) scale(1)'
      },
      onLoad(done) {
        if (!this.content.hotProductList.page || this.content.hotProductList.page >= this.content.hotProductList.totalpage) {
          if (done) done(true);
          return;
        }
        this.$store.dispatch("home/getHomeList").then((data) => {
          if (done) done(data.page >= data.totalpage);
        });
        // return;
        // if (this.totalpage <= this.pageNum && this.totalpage != 0) {
        //   if (done) { done(true) }
        //   return
        // }
        // else {
        //   this.pageNum = this.pageNum + 1;
        // }

        // this.getList({ pageNum: this.pageNum, pageSize: this.pageSize }, done);
      },
      toSearch() {
        this.$router.push('/search')
      },
      toDetail(item) {
        this.$router.push({ name: 'goods', params: { id: item.id } })
      },
      tofreeBuyList(){
        this.$router.push('/freeBuyList')
      },
      toMsg() {
        this.$router.push('/msg')
      },
      getFreeItemList() {
        const params = {
          pageNum: 1,
          pageSize: 1
        };
        this.$http
          .post("/home/selectZeroPurchaseLimitationList", params)
          .then(res => {
            this.itemList = res.info[0];
            // if (res.page >= res.totalpage) {
            //   this.finished = true;
            //   this.loading = false;
            // } else {
            //   this.loading = false;
            // }
          })
          .catch(error => {
            Toast(error.message);
          });
      },
      getBanner() {
        this.$store.dispatch("home/getSdvertiseList").then((data) => {
        });
      }
    }
  }
</script>

<style lang="scss">
  #home-box{
    // min-height: 100vh;
    // overflow: auto;
    .van-nav-bar__right,.van-nav-bar__left{
      svg{
        display: block;
      }
      height: 47px;
      line-height: 15px;
    }
    .van-cell__value{
      width: 110px!important;
      flex: none!important;
    }
    .list-title{
      font-size: 18px;
      color: $title-clr;
      margin:24px 0;
      display: flex;
      justify-content: space-between;
    }
    .van-cell__value{
      width: 110px!important;
      flex: none!important;
    }
    .van-field{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .van-search__content {
      border-radius: 20px;
    }
    .van-nav-bar {
      line-height: 56px;

      .van-icon {
        color: #969799;
      }

      .van-nav-bar__title {
        max-width: none;
        /* padding:0 35px; */
        padding-left: 35px;
        .van-search {
          padding: 5px 16px;

          .van-cell {
            padding: 3px 10px 3px 0;
          }
        }
      }
    }
  }
  .home {
    padding-top: 66px;
    height: 100vh;
    position: relative;
    .van-hairline--bottom::after {
      border-bottom-width: 0;
    }
   
  

    .home-content {
      /* position: absolute;
      top: 0px;
      width: 100vw; */
      background-image: linear-gradient(180deg, #FFFFFF 11%, #F2F2F2 100%);
      .van-list{
        /* min-height: calc(100vh -1.76rem); */
        min-height: calc(100vh - 1.76rem);
      }
      .curtain {
        display: flex;
        justify-content: center;
        position: absolute;
        overflow-x: hidden;
        width: 100vw;
        
        .cav {
          // height: 85px;
          height: 191px;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;
          background-color: $red;
          flex: none;
          width: 150vw;
        }
      }

      .store-scroller {
        .van-pull-refresh {
          padding-bottom: 50px;
        }

        .scroll {
          padding-top: 66px;

          ._v-content {
            padding-bottom: 50px;
          }
        }
      }
      .van-swipe__track{
        height: 164px!important;
        margin-top: 15px;
      }
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 164px;
        text-align: center;
        /* background-color: #66c6f2; */
        border-radius: 5px;
        img{
          height: 164px;
        }
      }

      .product-card {
        background-color: #fff;
        /* padding: 15px 15px; */
        margin-bottom: 15px;
        border-radius: 10px;
        width: 166px;      
        .img-box{
          width: 166px;
          height: 166px;
          border-bottom: solid thin $line-clr;
          img{
            border-radius: 10px 10px 0 0;
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .product-info{
          height: 120px;
          padding: 12px;
          position: relative;
        }
        .product-title{
          /* height: 38px; */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          color: $title-clr;
          font-size:$font-size-normal
        }
        .money-box{
          margin: 12px 0 8px 0;
        }
        .price-box{
          font-size: $font-size-big;
        }
        .back-price-box{
          font-size: $font-size-small;
          color:$primary-clr;
        }
        .had-sell-count{
          font-size: 10px;
          color: $text-clr;
          text-align:right;
          span{
            position: absolute;
            bottom: 12px;
            right: 12px;
          }
        }

        .product-sub-title{
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
</style>